<template>
	<view class="searchView">
		<SearchInput :value="value" @input-value="inputValue" @to-search="toSearch"></SearchInput>

		<template v-if="State == 0">
			<view class="search_historical" v-if="isHistorical">
				<SearchHistorical @detale-all="detaleAll" @search-value="searchValue"
					:HistoricalRearch="HistoricalRearch"></SearchHistorical>
			</view>
			<view class="search_proposal">
				<SearchProposal @search-value="searchValue"></SearchProposal>
			</view>
		</template>

		<template v-if="State == 1">
			<!-- 营养素列表 -->
			<view class="nutrition">
				<NutritionList :Nutrition="Nutrition" :order="order" :isHealth="isHealth"
					:isHearth_light="isHearth_light" @toggle-nutrition="toggleNutrition" @order-by="orderBy"
					@toggle-health="toggleHealth"></NutritionList>
			</view>

			<!-- 数据列表 -->
			<scroll-view class="listView" scroll-y="true" @scrolltolower="scrolltolower" >
				<!-- 下拉触底加载动画 -->

				<u-loading-page :loading="isLoading" loading-text="loading..."></u-loading-page>
				<template v-if="DetailsList.length != 0">
					<!-- 食物数据 -->
					<DetailsListItem v-for="(food, index) in DetailsList" :key="index" :food="food"
						:Nutrition="Nutrition"></DetailsListItem>
				</template>
				<template v-else>
					<view class="">
						暂无更多数据
					</view>
					<van-empty image="error" description="数据为空" />
				</template>
			</scroll-view>
			

			<u-loading-page :loading="isLoading" loading-text="loading..."></u-loading-page>
			
		</template>

	</view>
</template>

<script>
	var _ = require("lodash");
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				value: "", //搜索值
				DetailsList: [], //食物列表
				HistoricalRearch: [], //历史记录
				order: 0, //默认降序
				Nutrition: {
					index: 1,
					name: "营养素排序"
				}, //营养素
				isShow: false, //加载状态
				isLoading: false, //触底加载
				isHistorical: false,
				page: 1, //分页
				isHearth_light: true,
				isHealth: false, //推荐食物
			};
		},
		computed: {
			...mapState(["State"]),
		},
		watch: {
			value: function(val) {
				if (val == "") {
					this.Nutrition = {
						index: 1,
						name: "营养素排序"
					};
					this.order = 0;
					this.toggleState(0);
					try {
						const value = uni.getStorageSync('search');
						if (value) {
							this.HistoricalRearch = JSON.parse(value);
							this.isHistorical = true;
						} else {
							this.HistoricalRearch = []
						}
					} catch (e) {
						// error
					}
				}
			}
		},
		created: function() {
			this.toggleState(0);
			try {
				const value = uni.getStorageSync('search');
				if (value) {
					this.HistoricalRearch = JSON.parse(value);
					this.isHistorical = true;
				} else {
					this.HistoricalRearch = []
				}
			} catch (e) {
				// error
			}
		},
		methods: {
			...mapMutations(["toggleState"]),
			scrolltolower: function() {
				this.isLoading = true;
				this.page++;
				this.LoadingData();
			},

			inputValue(val) {
				this.value = val;
			},
			searchValue: function(val) {
				this.value = val;
				this.toSearch();
			},
			toggleHealth: function(val) {
				this.isHealth = val;
				this.page = 1;
				this.LoadingData();
			},
			setItem: function() {
				let val = this.value;
				let temp = this.HistoricalRearch.indexOf(val);
				if (temp == -1) {
					if (this.HistoricalRearch.length >= 5) {
						this.HistoricalRearch.pop();
					}
				} else {
					this.HistoricalRearch = this.HistoricalRearch.filter(
						(item) => item != val
					);
				}
				this.HistoricalRearch.unshift(val);
				uni.setStorageSync("search", JSON.stringify(this.HistoricalRearch))
			},

			detaleAll: function() {
				uni.removeStorage({
					key: 'search'
				});
				this.HistoricalRearch = [];
				this.isHistorical = false;
			},
			orderBy: function(event) {
				this.page = 1;
				this.order = event;
				this.LoadingData();
			},
			toggleNutrition: function(event) {
				this.Nutrition = event;
				this.page = 1;
				this.LoadingData();
			},
			toSearch() {
				if (this.value) {
					uni.request({
						url: `https://food.boohee.com/fb/v1/search?page=1&order_asc=desc&q=${this.value}`,
						success: (res) => {
							this.DetailsList = res.data.items;
							this.isShow = true;
							this.toggleState(1); //改变状态
							this.setItem(); //历史记录
						}
					})
				} else {
					uni.showToast({
						icon: "none",
						title: '搜索框不能为空'
					})
				}
			},
			LoadingData: function() {
				let q = `q=${this.value}`;
				let order_by = `order_by=${this.Nutrition.code}`;
				let order_asc = `order_asc=${this.order == 0 ? "desc" : "asc"}`;
				let health_light = `health_light=${this.isHealth == true ? "1" : ""}`;
				let page = `page=${this.page}`;
				if (this.page > 1) {
					this.isLoading = true;
				} else {
					this.isShow = false;
				}

				if (this.Nutrition.index == 1) {
					if (this.isHealth == true) {
						uni.request({
							url: `https://food.boohee.com/fb/v1/search?${page}&${order_asc}&${q}&${health_light}`,
							success: (res) => {
								if (this.page > 1) {
									if (res.data.items.length == 0 || res.data.page != this.page) {

										uni.showToast({
											title: '无更多数据',
											icon: 'none'
										})
									} else {
										this.DetailsList = this.DetailsList.concat(res.data.items);
									}
								} else {
									this.DetailsList = res.data.items;
								}
								this.isShow = true;
								this.isLoading = false;
							}
						})
					} else {
						uni.request({
							url: `https://food.boohee.com/fb/v1/search?${page}&${order_asc}&${q}`,
							success: (res) => {
								if (this.page > 1) {
									if (res.data.items.length == 0 || res.data.page != this.page) {

										uni.showToast({
											title: '无更多数据',
											icon: 'none'
										})
									} else {
										this.DetailsList = this.DetailsList.concat(res.data.items);
									}
								} else {
									this.DetailsList = res.data.items;
								}
								this.isShow = true;
								this.isLoading = false;
							}
						})
					}
				} else if (this.Nutrition.index != 1) {
					uni.request({
						url: `https://food.boohee.com/fb/v1/search?${page}&${order_asc}&${q}&${order_by}`,
						success: (res) => {
							if (this.page > 1) {
								if (res.data.items.length == 0 || res.data.page != this.page) {

									uni.showToast({
										title: '无更多数据',
										icon: 'none'
									})
								} else {
									this.DetailsList = this.DetailsList.concat(res.data.items);
								}
							} else {
								this.DetailsList = res.data.items;
							}
							this.isShow = true;
							this.isLoading = false;
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchView {
		width: 100%;
		min-height: 100vh;

		.listView {
			overflow-y: auto;
			height: 85vh;
			position: relative;

			.loadig {
				position: fixed;
				left: 45%;
				right: 45%;
			}
		}
	}
</style>
